<script setup lang="ts">
import {ref} from 'vue'
import UserHeader from './components/UserHeader.vue'
import MenuList from './components/MenuList.vue'
import AboutDialog from './components/AboutDialog.vue'
import {useAuthStore} from "@/stores/auth";
import {storeToRefs} from 'pinia';
import {showConfirmDialog} from 'vant';

// 模拟用户数据
const authStore = useAuthStore()
const {currentUser} = storeToRefs(authStore)

const aboutDialogRef = ref<InstanceType<typeof AboutDialog>>()

const menuItems = [
  {
    title: '我的课时',
    label: '查看预约的课时',
    icon: 'clock',
    isLink: true,
    to: '/lesson/student?backPathName=PersonalCenter'
  },
  {
    title: '常见问题',
    label: '一些常见问题',
    icon: 'question',
    isLink: true,
    to: '/common/problem'
  },
  {
    title: '关于我们',
    label: '关于我们',
    icon: 'info',
    action: () => aboutDialogRef.value?.open()
  },
  {
    title: '修改密码',
    label: '修改密码',
    icon: 'records',
    isLink: true,
    to: '/personal/update-password'
  },
  {
    title: '退出登录',
    label: '退出登录',
    icon: 'clear',
    action: () => {
      showConfirmDialog({
        title: '退出登录',
        message: '您确定要退出登录吗？',
      }).then(async () => {
        await authStore.logout();
      });
    }
  }
]

const aboutMessage = `Jvyou 驾校预约平台是为了帮助学员在驾校预约课时，提升驾龄，提升驾考成绩而开发的免费平台，帮助学员提升驾龄，提升驾考成绩。`
</script>

<template>
  <div class="personal-page">
    <!-- 移除外部 padding，让渐变背景铺满 -->
    <UserHeader :user="currentUser" class="user-header-wrapper"/>

    <!-- 确保 MenuList 正确渲染 -->
    <MenuList :items="menuItems" class="menu-list-wrapper"/>

    <AboutDialog
        ref="aboutDialogRef"
        title="关于我们"
        :message="aboutMessage"
    />
  </div>
</template>

<style scoped lang="less">
.personal-page {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 60px;

  .user-header-wrapper {
    margin: 0; /* 移除默认 margin */
  }

  .menu-list-wrapper {
    margin-top: 12px;
  }
}
</style>
